<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style>
			#slider {
				height: 410px;
				/* background-color: #fff; */
			}

			#slider .mui-slider-item {
				background-color: #fff;
			}

			#slider img {
				height: 300px;
			}

			.mui-indicator {
				height: 50px !important;
				border-radius: 10px !important;
				width: 50px !important;
				background-color: #fff !important;
				border: 0 !important;
				-webkit-box-shadow: none !important;
				transform: translateY(0px);
			}

			body {
				background-color: #f3f4f6;
			}

			.xiaoku {
				display: flex;
				justify-content: space-around;
				width: 200px;
				background-color: #e6e7e9;
				border-radius: 30px;
				margin: 10px auto;
			}

			.xiaoku span {
				padding: 4px;
			}

			.mui-slider-item img {
				display: none;
			}

			.box {
				background-color: #fff;
				margin: 10px;
				border-radius: 5px;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
		</header>
		<div id="slider" class="mui-slider" style="margin-top: 50px;">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<img src="./images/fl-img/phone/tuijian/fl-ph-s01.png" style="display: block;">
					<img src="./images/fl-img/phone/tuijian/fl-ph-s02.png">
					<img src="./images/fl-img/phone/tuijian/fl-ph-x01.png">
					<img src="./images/fl-img/phone/tuijian/fl-phimg01.png">
				</div>
			</div>
			<div class="xiaoku">
				<span>概括</span>
				<span>概括></span>
				<span>更多探索></span>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active">
					<img src="./images/fl-img/phone/tuijian/fl-ph-s01.png" style="width: 100%; height: 100%;">
				</div>
				<div class="mui-indicator">
					<img src="./images/fl-img/phone/tuijian/fl-ph-s02.png" style="width: 100%; height: 100%;">
				</div>
				<div class="mui-indicator">
					<img src="./images/fl-img/phone/tuijian/fl-ph-x01.png" style="width: 100%; height: 100%;">
				</div>
				<div class="mui-indicator">
					<img src="./images/fl-img/phone/tuijian/fl-phimg01.png" style="width: 100%; height: 100%;">
				</div>
			</div>
		</div>
		<div class="box">
			<h1 style="color: #e40131;"><span style="font-size: 24px;">￥</span><span class="jiage">999</span></h1>
			<div style="display: flex;align-items: center;justify-content: space-between;">
				<div>
					<span class="topsj">赠送积分</span>
					<span class="topsj">0分期利息</span>
				</div>
				<span class="right_box">优惠 &gt;</span>
			</div>
		</div>

		<div class="box">
			<h4 style="color: #000;" class="protitle">HUAWElPura 70 Ultra16GB+512GB 香颂绿</h4>
			<p style="color: #e40131;">①教育认证优惠100元(下拉至商详页认证)212期0分期利息(小程序尚不支持，请前往APP端使用)超聚光伸缩提</p>
		</div>

		<div class="box">
			<div class="color_val">
				<span class="title">
					颜色
				</span>
				<span class="pr_meta">
					黑白羽
				</span>
				<span class="pr_meta">
					黑白羽
				</span>
				<span class="pr_meta">
					黑白羽
				</span>
				<span class="pr_meta">
					黑白羽
				</span>
				<span class="pr_meta">
					黑白羽
				</span>
			</div>
			<div class="product_val" style="margin-top: 20px;">
				<span class="title">
					版本
				</span>
				<span class="pr_meta">
					12GB+512GB
				</span>
				<span class="pr_meta">
					16GB+512GB
				</span>
				<span class="pr_meta">
					16GB+512GB 典藏版
				</span>
				<span class="pr_meta">
					16GB+1TB 典藏版
				</span>
				<span class="pr_meta">
					12GB+256GB
				</span>
			</div>
			<div style="margin-top: 20px;">
				<span class="title">
					数量
				</span>
				<button class="add">+</button>
				<input type="number" style="width: 30px;height: 20px;padding: 0;text-align: center;" class="count"
					value="1">
				<button class=" edd">-</button>

			</div>
			<br />
			<br />
		</div>
		<div class="mymeta">
			<a onclick="location.href = './home.html'">
				<img src="./images/daohang/pic1.jpg" alt="">
				<div>
					首页
				</div>
			</a>
			<a href="./index.html">
				<img src="./images/daohang/DHY03.jpg" alt="">
				<div>
					客服
				</div>
			</a>
			<a href="./index.html" class="cartt">
				<img src="./images/daohang/pic3.jpg" alt="">
				<div>
					购物车
				</div>
			</a>
			<div class="btnanni">
				<button id="cartBtn">加入购物车</button>
				<button>立即购买</button>
			</div>
		</div>


		<style>
			.mymeta {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;
			}

			.btnanni {
				border-radius: 30px;
				background: linear-gradient(to right, #fe934b 50%, #dc2622 50%);
			}

			.mymeta button {
				background-color: transparent;
				border: 0;
				color: #fff;
				font-weight: 600;
				text-align: center;
				margin: 0;
			}

			.mymeta img {
				width: 20px;
			}

			.mymeta a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #000;
				font-size: 12px;
				width: 50px;
			}

			.active {
				border: 1px solid #e40131 !important;
			}

			.add,
			.edd {
				height: 20px;
				line-height: 20px;
				width: 30px;
				padding: 0;
			}

			.pr_meta {
				display: inline-block;
				/* width: 0px; */
				padding: 2px 5px;
				margin: 10px;
				background: rgba(0, 0, 0, .05);
				font-size: .6rem;
				color: #000;
				border-radius: 5px;
			}

			.right_box {
				background-color: #e40131;
				font-size: 14px;
				padding: 2px 10px;
				border-radius: 15px;
				color: #fff;
			}

			.topsj {
				font-size: 14px;
				color: #e40131;
				background-color: #fdeeea;
				border: 1px solid #b02442;
				padding: 3px;
				border-radius: 5px;
			}
		</style>
		<script src="./js/mui.js"></script>
		<script src="./js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			mui.init()
			var id = location.href.substring(location.href.length - 1)
			var mindicator = document.querySelectorAll('.mui-indicator')
			var lunbo = document.querySelectorAll('.mui-slider-item img') // 假设轮播图的类名是 'lunbo'

			// 首先移除所有轮播图的 'mui-active' 类
			lunbo.forEach(function(item) {
				item.classList.remove('mui-active')
			})

			// 为每个指示器添加点击事件
			mindicator.forEach(function(indicator, index) {
				indicator.addEventListener('click', function() {
					// 移除所有轮播图的 'mui-active' 类
					lunbo.forEach(function(item) {
						item.style.display = 'none'
					})
					// 为当前索引的轮播图添加 'mui-active' 类
					lunbo[index].style.display = 'block'
				})
			})


			//	购物的计数器
			var count = 1
			$('.add').click(function() {
				count++
				$('.count').val(count)
			})
			$('.edd').click(function() {
				if (count > 1) {
					count--
					$('.count').val(count)
				}
			})

			var color = null
			var pr_meta = null
			// 给每一栏目 做一个单选,并且获取到值
			$('.product_val .pr_meta').click(function() {
				$('.product_val .pr_meta').removeClass('active')
				$(this).addClass('active')
				var value = $(this).text().trim()
				pr_meta = value
			})
			$('.color_val .pr_meta').click(function() {
				$('.color_val .pr_meta').removeClass('active')
				$(this).addClass('active')
				var value = $(this).text().trim()
				color = value
			})
			mui('body').on('tap', '#cartBtn', function() {


				var cart = localStorage.getItem("cart")
				cart = JSON.parse(cart)

				if (cart != null && cart != "") { // 使用 && 替换 ||
					cart.push({
						pic: $(".mui-slider-item img")[0].src,
						title: $(".protitle").html(),
						canshu: color + " " + pr_meta,
						price: $(".jiage").html(),
						count: $(".count").val(),
					})
					mui.toast('加入购物车成功')
				} else {
					cart = [{
						pic: $(".mui-slider-item img")[0].src,
						title: $(".protitle").html(),
						canshu: color + " " + pr_meta,
						price: $(".jiage").html(),
						count: $(".count").val(),
					}]
					mui.toast('加入购物车成功')
				}

				localStorage.setItem("cart", JSON.stringify(cart))
			})
			mui('body').on('tap', '.cartt', function() {
				mui.openWindow('shop2.html', 'id', {})
			})
		</script>
	</body>

</html>